<template>
  <div>
    <el-form
        :model="form"
        ref="formRef"
        :rules="rules"
        label-width="80px"
        :inline="false"
    >
      <el-form-item label="数据库实例" prop="instanceId">
        <el-select
            v-model="instanceId"
            placeholder="数据库实例"
            filterable
            @change="(val) => getSchemaList(val)"
        >
          <el-option
              v-for="item in serverList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="数据库库名" prop="schema">
        <el-select
            v-model="schema"
            filterable
            placeholder="数据库实例"
            @change="getTableList"
        >
          <el-option
              v-for="item in schemaList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="表名称" prop="tableList">
        <el-select
            v-model="tableList"
            placeholder="表名称"
            filterable
            multiple
        >
          <el-option
              v-for="item in schemaTableList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
            <span style="float: left">{{ item.label }}</span>
            <span
                style="
                                float: right;
                                color: var(--el-text-color-secondary);
                                font-size: 13px;
                            "
            >【{{ item.tableComment }}】</span
            >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文件地址" prop="absolutePath">
        <el-select
            v-model="absolutePath"
            placeholder="文件地址(到当前项目、模块就可以了)"
            filterable
            clearable
            allow-create
        >
          <el-option
              v-for="item in clientJavaPathList"
              :key="item.value"
              :label="item.absolutePath"
              :value="item.absolutePath"
          >
            <el-row>
              <el-col :span="12">
                                <span style="float: left">{{
                                    item.absolutePath
                                  }}</span>
              </el-col>
            </el-row>
          </el-option>
        </el-select>

        <!--                <el-input-->
        <!--                    v-model="absolutePath"-->
        <!--                    placeholder="/Users/wujiawei/IdeaProjects/wu-framework-parent/wu-freamwork-test"-->
        <!--                    clearable-->
        <!--                ></el-input>-->
      </el-form-item>
      <el-form-item label="文件前缀" prop="prefix">
        <el-input v-model="prefix" placeholder="" clearable></el-input>
      </el-form-item>
      <el-form-item label="编程语言" prop="programmingLanguage">
        <el-select
            v-model="programmingLanguage"
            placeholder="编程语言"
            filterable
        >
          <el-option label="Java" value="JAVA"/>
          <el-option label="Vue" value="VUE"/>
        </el-select>
      </el-form-item>
      <el-form-item v-if="programmingLanguage==='JAVA'" label="架构" prop="webArchitecture">
        <el-select
            v-model="webArchitecture"
            placeholder="架构"
            filterable
        >
          <el-option label="DDD" value="DDD_ARCHITECTURE"/>
          <el-option label="WEB_MVC" value="WEB_MVC"/>
          <el-option label="FEIGN" value="FEIGN_API"/>
          <el-option label="MODULE" value="MODULE"/>
        </el-select>
      </el-form-item>
      <el-form-item v-if="programmingLanguage==='JAVA'" label="ORM" prop="ormArchitecture">
        <el-select
            v-model="ormArchitecture"
            placeholder="ORM"
            filterable
        >
          <el-option label="MYBATIS" value="MYBATIS"/>
          <el-option label="LAZY" value="LAZY"/>
        </el-select>
      </el-form-item>
      <el-form-item label="包名称" prop="packageName">
        <el-select
            v-model="packageName"
            placeholder="com.alimama.demo"
            filterable
            clearable
            allow-create
        >
          <el-option
              v-for="item in clientJavaPathList"
              :key="item.value"
              :label="item.packageName"
              :value="item.packageName"
          >
            <el-row>
              <el-col :span="12">
                                <span style="float: left">{{
                                    item.packageName
                                  }}</span>
              </el-col>
            </el-row>
          </el-option>
        </el-select>
      </el-form-item>
      <el-switch
          v-if="programmingLanguage==='JAVA'"
          v-model="enableSchema"
          active-text="模型中包含schema"
          inactive-text="模型中不包含schema">
      </el-switch>
      <el-switch
          v-if="programmingLanguage==='JAVA'"
          style="display: block"
          v-model="enableExport"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="支持Excel导入导出"
          inactive-text="不支持Excel导入导出">
      </el-switch>
    </el-form>

    <span>
            <el-button type="primary" @click="onSubmit()">确定</el-button>
        </span>
  </div>
</template>
<script>

export default {
  data: () => ({
    description: "客户端生成code工厂",
    buttons: {
      generate: {name: "生成代码"},
    },
    // type 0:目录 1：菜单 2：按钮
    type: "1",
    icon: "HotWater",
    name: "客户端生成code工厂",
  }),
};
</script>

<script setup>
//?导入公共查询方法

import {onMounted, reactive, ref, toRefs} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const rules = {
  instanceId: [
    {
      required: true,
      message: "请输入数据库服务器",
      trigger: "blur",
    },
  ],
  schema: [
    {
      required: true,
      message: "请选择数据库库名",
      trigger: "blur",
    },
  ],
  tableList: [
    {
      required: true,
      message: "请选择数据库表",
      trigger: "blur",
    },
  ],
  clientId: [
    {
      required: true,
      message: "请选择客户端",
      trigger: "blur",
    },
  ],
  programmingLanguage: [
    {
      required: true,
      message: "请选择编程语言",
      trigger: "blur",
    },
  ],
  absolutePath: [
    {
      required: true,
      message: "请输入文件输出地址",
      trigger: "blur",
    },
  ],
  packageName: [
    {
      required: true,
      message: "请输入项目包名",
      trigger: "blur",
    },
  ],
};

const formRef = ref(null);
const form = reactive({
  schema: "",
  instanceId: "",
  tableList: [],
  clientId: "",
  absolutePath: "",
  prefix: "",
  webArchitecture: "DDD_ARCHITECTURE",
  programmingLanguage: "JAVA",
  ormArchitecture: "LAZY",
  packageName: "",
  enableSchema: false,
  enableExport: true,
});
const {
  schema,
  instanceId,
  tableList,
  clientId,
  absolutePath,
  prefix,
  webArchitecture,
  programmingLanguage,
  ormArchitecture,
  packageName,
  enableSchema,
  enableExport
} = toRefs(form);
const serverList = ref([]);
const schemaList = ref([]);
const schemaTableList = ref([]);
const clientJavaPathList = ref([]);

onMounted(async () => {
  getInstanceList();
  findJarDefault();
});

/**
 * 获取实例上的表
 */
const getTableList = () => {
  // 查询数据表信息
  axios.get('/v1/api/project/dataSource/findTableList', {
    params: {
      instanceId: instanceId.value,
      schema: schema.value,
    }
  }).then(res => {
    if (res.status === 200 && res.data) {
      res.data.data.map((item) => {
        item.label = item.tableName;
        item.value = item.tableName;
      });
      schemaTableList.value = res.data.data ? res.data.data : [];
    } else {
      console.error(res);
    }
  })
};
/**
 * 获取数据库实例
 */
const getInstanceList = () => {
  // 查询数据库实例
  axios.get('/v1/api/project/dataSource/findDataSourceList').then(res => {
    console.log(res);
    if (res.status === 200 && res.data) {
      serverList.value = res.data.data ? res.data.data.map((item) => {
        console.log(item);
        return {
          label: "DataSource[" + item + "]",
          value: item,
        }
      }) : [];
    } else {
      console.error(res);
    }

  });
};

const getSchemaList = (databaseInstance = null) => {
  console.log(databaseInstance);
  // 查询数据schema信息
  axios.get('/v1/api/project/dataSource/findSchemaList', {
    params: {
      instanceId: instanceId.value,
    }
  }).then(res => {
    if (res.status === 200 && res.data) {
      res.data.data.map((item) => {
        item.label = item.schemaName;
        item.value = item.schemaName;
      });
      schemaList.value = res.data.data ? res.data.data : [];
      console.log(schemaList.value);
    } else {
      console.error(res);
    }

  })
};

const findJarDefault = (clientId) => {
  axios.get("/v1/api/project/dataSource/findJarDefault").then((res) => {
    if (res.status === 200 && res.data) {
      res.data.data.map((item) => {
        item.label = item.absolutePath;
        item.value = item.absolutePath;
      });
      clientJavaPathList.value = res.data.data ? res.data.data : [];
    } else {
      console.error(res);
    }
  });
};
/**
 * @description:提交
 * @return {*}
 */
const onSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      console.log(form);
      axios.post("/v1/api/project/dataSource/clientGenerateLocalJava", {
        instanceId: form.instanceId,
        schemaName: form.schema,
        tableList: form.tableList,
        absolutePath: form.absolutePath,
        packageName: form.packageName,
        webArchitecture: form.webArchitecture,
        programmingLanguage: form.programmingLanguage,
        prefix: form.prefix,
        ormArchitecture: form.ormArchitecture,
        clientId: form.clientId,

      }).then(res => {
        const {status, data} = res;
        const {code, message} = data;
        if (status === 200 && code === 0) {
          ElMessage({
            message: '代码生成成功',
            type: 'success',
          })
        } else {
          ElMessage.error('代码生成失败:' + message)
        }

      })
    } else {
      console.log("error submit!!");
      return false;
    }
  });
};
</script>

<style lang="scss" scoped></style>
